<template>
	<div class="star" :class="starType">
		<span class="star-item" :class="itemClass" v-for="itemClass in itemCalsses"></span>
	</div>
</template>

<script>
	const LENGTH=5;
	const CLL_ON="on";
	const CLL_HALF="half";
	const CLL_OFF="off";
	export default{
		props:{
			size:{
				type:Number
			},
			score:{
				type:Number
			}
		},
		computed:{
			starType(){
				return "star-"+this.size
			},
			itemCalsses(){
				let result=[];
				let score = (Math.floor(this.score*2))/2
				let hasDecial = score%1!==0;
				let integer =Math.floor(score);
				for(let i=0;i<integer;i++){
					result.push(CLL_ON)
				}
				if(hasDecial){
					result.push(CLL_HALF)
				}
				while(result.length<LENGTH){
					result.push(CLL_OFF)
				}
				return result;
			}
		},
		
	}
</script>

<style lang="styl">
	@import '~common/stylus/max.styl';
	.star
		font-size:0
		.star-item
			display:inline-block
			background-repeat:no-repeat
		&.star-48
			.star-item
				width:20px
				height:20px
				margin-right:22px
				background-size:20px 20px
				&:last-child
					margin-right:0
				&.on
					bg-image("star48_on")
				&.half
					bg-image("star48_half")
				&.off
					bg-image("star48_off")
		&.star-36
			.star-item
				width:15px
				height:15px
				margin-right:6px
				background-size:15px 15px
				&.on
					bg-image("star36_on")
				&.half
					bg-image("star36_half")
				&.off
					bg-image("star36_off")
		&.star-24
			.star-item
				width:10px
				height:10px
				margin-right:2px
				background-size:10px 10px
				&.on
					bg-image("star24_on")
				&.half
					bg-image("star24_half")
				&.off
					bg-image("star24_off")
		
</style>